<!doctype html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<title>canvas-translate-平移变换</title>
<style>
    body {
        background: url("/icon.png") repeat;
    }

    #canvas {
        border: 1px solid #aaaaaa;
        display: block;
        margin: 50px auto;
    }
</style>
</head>

<body>
<div id="canvas-warp">
    <canvas id="canvas">
        你的浏览器居然不支持Canvas?
    </canvas>
</div>

<script>
    window.onload = function() {
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");
        context.fillStyle = "#FFF";
        context.fillRect(0, 0, 800, 600);

        context.fillStyle = "#00AAAA";
        context.fillRect(100, 100, 200, 100);

        context.fillStyle = "red";
        context.translate(100, 100);
        context.fillRect(100, 100, 200, 100);
        // 第一种方法
        context.translate(-100, -100);
        // 第二种方法
        // context.save();
        // context.translate(200, 200);
        // context.restore();

        context.fillStyle = "yellow";
        context.translate(200, 200);
        context.fillRect(100, 100, 200, 100);
    }
</script>
</body>

</html>